<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>LED数字</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/led.css" />
		<style>
			body {
				background-color: #000;
			}
			.circle{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: red;
				transform: translateY(-90px);
			}
			.circle1{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: red;
				transform: translateY(-90px);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<template v-for='(i,index) in time'>
				<my-led :value='i'></my-led>
				<span v-if='index==1 || index==3' class="circle"></span>
			</template>
			<hr >
			<template v-for='(i,index) in date'>
				<my-led :value='i'></my-led>
				<span v-if='index==3 || index==5' class="circle1"></span>
			</template>

		</div>
		<script src="js/led.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				components: {
					'my-led': Led
				},
				data() {
					return {
						date:[0,0,0,0,0,0,0,0],
						time:[0,0,0,0,0,0]//时分秒
					}
				},
				created(){
					setInterval(this.getTime,1000)
					setInterval(this.getDate,1000)
				},
				methods: {
					getTime(){
					//获取当前时间
						var now=new Date()
						let s=now.getSeconds()//秒
						this.time[4]=parseInt(s/10)//十位
						this.time[5]=parseInt(s%10)
						let m=now.getMinutes()//秒
						this.time[2]=parseInt(m/10)//十位
						this.time[3]=parseInt(m%10)
						let h=now.getHours()//秒
						this.time[0]=parseInt(h/10)//十位
						this.time[1]=parseInt(h%10)
					},
					getDate(){
						var now=new Date()
						let y=now.getFullYear()//秒
						this.date[0]=parseInt(y/1000)//十位
						this.date[1]=parseInt(y%1000/100)
						this.date[2]=parseInt(y%100/10)
						this.date[3]=parseInt(y%10)
						let m=now.getMonth()+1//秒
						this.date[4]=parseInt(m/10)//十位
						this.date[5]=parseInt(m%10)
						let d=now.getDate()//秒
						this.date[6]=parseInt(d/10)//十位
						this.date[7]=parseInt(d%10)
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
